/*
 * @Author: Wilbur
 * @Date: 2019-03-27 09:35:18
 * @Last Modified by: Wilbur
 * @Last Modified time: 2019-03-28 15:00:22
 */
<template>
    <div class="container meterial-tags-container">
        <div class="operation-wrapper">
            <el-button
                type="primary"
                @click="fnAddTag('', null)"
                size="small">新增标签</el-button>
        </div>
        <div class="content-wrapper">
            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    height="100%"
                    style="width: 100%;">
                    <el-table-column
                        fixed="left"
                        header-align="left"
                        align="center"
                        label="序号">
                        <template slot-scope="scope">
                            <div class="table-index">
                                {{ scope.$index + 1 }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed="left"
                        prop="tag_name"
                        show-overflow-tooltip
                        label="标签名称"/>

                    <el-table-column
                        prop="create_time"
                        label="创建时间">
                        <template slot-scope="scope">
                            {{ scope.row.create_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="tag_status"
                        show-overflow-tooltip
                        label="状态">
                        <template slot-scope="scope">
                            <template v-if="scope.row.tag_status == 1">已启用</template>
                            <template v-if="scope.row.tag_status == 0">未启用</template>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="date"
                        label="操作"
                        fixed="right">
                        <template slot-scope="scope">
                            <div>
                                <el-button
                                    type="text"
                                    @click="fnAddTag(scope.row.tag_no, scope.row.tag_name)">编辑</el-button>
                                <el-button
                                    type="text"
                                    style="margin-left:10px;"
                                    @click="fnDelTag(scope.row.tag_no)">
                                    删除
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            authResult: {},
            tableData: [],
            filterData: {
                title: ''
            },
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            baseUrl: '',
            mobileUrl: '',
            escape: escape,
            sessionTicket: localStorage.getItem('sessionTicket')
        };
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.baseUrl = this.$baseUrl;
        this.mobileUrl = location.host == 'phaadmin.wxhand.com' ? 'http://class.zsdx.cn' : 'http://task.wxhand.com';
        this.$store.commit('SET_HEADER', [
            {
                title: "广告系统",
            },
            {
                title: '资料库标签'
            }
        ]);
        this.getTableData();
    },
    mounted() {
    },
    methods: {
        fnDelTag(tag_no) {
            this.$confirm('是否删除此标签?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/wei4/material_tag%5Cdelete', {
                    tag_no: tag_no,
                }, resp => {
                    if (resp.code == 1) {
                        this.getTableData();
                        this.$message({
                            type: 'success',
                            message: '操作成功',
                            center: true
                        });
                    }
                });
            }).catch(() => {
            });
        },
        fnAddTag(tag_no, name) {
            this.$prompt('请输入新增标签名称', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputValue: name,
                inputPattern: /\S/,
                inputErrorMessage: '请输入标签名称'
            }).then(({ value }) => {
                this.$post('/wei4/material_tag%5Csave', {
                    tag_no: tag_no,
                    tag_name: value,
                    tag_status: 1
                }, resp => {
                    if (resp.code == 1) {
                        this.getTableData();
                        this.$message({
                            type: 'success',
                            message: '操作成功',
                            center: true
                        });
                    }
                });
            }).catch(() => {
            });
        },
        fnChangeBidStatus(id, status) {
            this.$post('/wei4/base%5Cbanner%5Cset_status', {
                id: id,
                status: status == 1 ? 0 : 1
            }, resp => {
                if (resp.code == 1) {
                    this.getTableData();
                    this.$message({
                        type: 'success',
                        message: '操作成功',
                        center: true
                    });
                }
            });
        },
        /**
         * 获取表格数据
         */
        getTableData() {
            this.$post('/wei4/material_tag%5Cget_list', {
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                }
            });
        },

        /**
         * 跳转页面
         */
        handleRoute(name, query) {
            let obj = {
                name
            };

            if (query) {
                obj.query = query;
            }

            this.$router.push(obj);
        },

        /**
         * 列表渲染辅助函数：列表项为空处理
         */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.operation-wrapper {
    display: flex;
    flex-direction: row-reverse;
    padding: 12px 23px;
    background-color: #fff;

    .el-button {
        margin-left: 10px;
    }
}
.content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 15px;
    overflow: hidden;
}
.search-wrapper {
    padding: 15px;
    background-color: #fff;
}
.filter-item {
    .el-form-item {
        margin-bottom: 0;
        white-space: nowrap;
    }
    .el-input {
        width: auto;
        vertical-align: middle;
    }
    .el-button {
        margin-left: 15px;
        vertical-align: middle;
    }
}
.table-wrapper {
    flex: 1;
    background-color: #fff;
}
.pagination-wrapper {
    padding-top: 10px;
    .el-pagination {
        float: right;
        padding: 0;
        background-color: transparent;
    }
}
</style>
<style lang="less">
.meterial-tags-container {
    tbody {
        .cell {
            display: flex;
            align-items: center;
            height: 48px;
        }
    }
}
</style>
